<template>
  <div class="mine">
    <div class="header">
      <img src class="avatar" alt />
      <div class="user_info">
        <span class="user_name">普通用户</span>
        <div class="user_info_bottom">
          <span class="ticket">优惠券：0</span>
        </div>
      </div>
      <!-- <img class="about" src="@/assets/icon/warn.png" alt /> -->
    </div>
    <van-grid>
      <van-grid-item icon="photo-o" text="待支付" />
      <van-grid-item icon="photo-o" text="代发货" />
      <van-grid-item icon="photo-o" text="待收货" />
      <van-grid-item icon="photo-o" text="已完成" />
    </van-grid>

    <div class="item">
      <van-icon name="label-o" size="20" style="margin-right:.2rem"/>
      <span style="font-size:.28rem">全部订单</span>
      <van-icon name="arrow" style="margin-left:auto" color="#999"/>
    </div>
    <div class="item" @click="navTo('/coupon')">
      <van-icon name="label-o" size="20" style="margin-right:.2rem"/>
      <span style="font-size:.28rem">优惠券</span>
      <van-icon name="arrow" style="margin-left:auto" color="#999"/>
    </div>
    <div class="item" @click="navTo('/address')">
      <van-icon name="label-o" size="20" style="margin-right:.2rem" />
      <span style="font-size:.28rem">收货地址</span>
      <van-icon name="arrow" style="margin-left:auto" color="#999"/>
    </div>
    <div class="item">
      <van-icon name="label-o" size="20" style="margin-right:.2rem"/>
      <span style="font-size:.28rem">关于</span>
      <van-icon name="arrow" style="margin-left:auto;" color="#999"/>
    </div>
  </div>
</template>

<script>
import { mixins } from '@/utils/mixins'
export default {
  mixins:[mixins],

};
</script>

<style lang="less" scoped>
.item{
  width: 100%;
  display: flex;
  align-items: center;
  padding: .3rem .4rem;
  border-bottom: 1px solid #f7f7f7;

}
.header {
  width: 100%;
  height: 2.4rem;
  background-color: #3963bc;
  padding: 0.4rem;
  position: relative;

  display: flex;
  align-items: center;
  .avatar{
    width: 1.6rem;
    height: 1.6rem;
    background-color: #fff;
  }
  .user_info{
    height: 100%;
    margin-left: .2rem;
    color: #fff;
    .user_name{
      padding-left: .10rem;
      font-size: .36rem;
    }
    .user_info_bottom{
      font-size: .28rem;
      margin-top: .1rem;
      padding: .04rem .24rem;
      background-color: #f7f7f7;
      color: #666;
      border-radius: .6rem;
    }
  }

}
</style>